<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>Widget Palette: HTML Element Tests</title>

	<!-- CUSTOMIZATION: Make sure "../" URLs for href/src attributes are correct -->
	<link rel="stylesheet" type="text/css" href="../css/testplan.css" />
</head>

<body>
	<div class="navbar">
		<a href="./" title="show directory contents"><code>./</code> (show contents of this directory)</a>
		&nbsp;&nbsp;&nbsp;&nbsp;
		<a href="../" title="show directory contents"><code>../</code> (show contents of parent directory)</a>
	</div>
	<hr />
	<h1 class="test_title">Widget Palette: HTML Element Tests</h1>

	<h2 class="test_section">Media (&lt;audio&gt;, &lt;video&gt;, and &lt;embed&gt;)</h2>
	<h3 class="steps_subsection">Steps</h3>
	<ol class="steps">
		<li>Choose New HTML File from the New menu</li>
		<li>Open the HTML folder in the Widget palette.</li>
		<li>Drag an &lt;audio&gt; widget onto the canvas.</li>
		<li>Notice a Smart Input dialog is displayed with a text field. By default, it will contain the following:
			<PRE>
http://maqetta.org/samples/media/maqettaSound.mp3
http://maqetta.org/samples/media/maqettaSound.ogg
			</PRE>
		</li>
		<li>Click OK.</li>
		<li>Click on the Preview icon in the toolbar. This should open a new browser window showing your &lt;audio&gt; element. You should hear sound when you click play.</li>
		<li>Double-click the &lt;audio&gt; element to bring Smart Input back up.</li>
		<li>Enter the file name for a non-existent file (e.g. <i>this_is_a_bad_filename</i>) and click OK. Ensure the &lt;audio&gt; element
		    still has a size and is available for selection. (In Chrome, there will be partial playback controls. And, in FF, there will just be
		    an empty box.)</li>
		<li>Double-click the &lt;audio&gt; element to bring Smart Input back up and specify a new source by copying and pasting the following into the text box:
			<PRE>
http://www.w3schools.com/html/horse.mp3
http://www.w3schools.com/html/horse.ogg
			</PRE>
				<b>NOTE: None of the commonly used audio formats are supported by all of the major browsers 
					(see <a href="http://www.w3schools.com/html/html5_audio.asp">Audio Formats and Browser Support</a>). It is expected that specifying both 
					<i>mp3</i> and <i>ogg</i> files (like we do above) should work across browsers. But, if you try some of your own audio files, please note possible 
					incompatibilities with your browser.</b>
			</ul>
		</li>
		<li>Click on Preview icon in the toolbar. This should open a new browser window showing your audio element. You should hear sound when you click play.</li>
		<li>EXTRA CREDIT: 
			<ol>
				<li>Drop a &lt;video&gt; element onto the page.</li>
				<li>Notice a Smart Input dialog is displayed with a text field. By default, it will contain the following:
					<PRE>
http://maqetta.org/samples/media/maqettaVideo.mp4
http://maqetta.org/samples/media/maqettaVideo.ogg
					</PRE>
				</li>
				<li>Click OK.</li>
				<li>Click on the Preview icon in the toolbar. This should open a new browser window showing your &lt;video&gt; element. You should see a video and 
					hear sound when you click play.</li>
				<li>Double-click the &lt;video&gt; element to bring Smart Input back up and specify a new source by copying and pasting the following into the text box:
					<PRE>
http://www.w3schools.com/html/movie.mp4
http://www.w3schools.com/html/movie.ogg
					</PRE>
					<b>NOTE: None of the commonly used video formats are supported by all of the major browsers 
						(see <a href="http://www.w3schools.com/html/html5_video.asp">Video Formats and Browser Support</a>). It is expected that 
						specifying both <i>mp4</i> and <i>ogg</i> files (like we do above) should work across browsers. But, if you try some of 
						your own video files, please note possible incompatibilities with your browser.</b>
				</li>
				<li>Click OK.</li>
				<li>Click on the Preview icon in the toolbar. This should open a new browser window showing your &lt;video&gt; element. You should see a video and 
					hear sound when you click play.</li>
			</ol>
		</li>
		<li>DOUBLE EXTRA CREDIT: 
			<ol>
				<li>Drop an &lt;embed&gt; element onto the page.</li>
				<li>Notice a Smart Input dialog is displayed with a text field. By default, it will contain the following:
					<PRE>
http://maqetta.org/samples/embed.html
					</PRE>
				</li>
				<li>Click OK.</li>
				<li>Double-click the &lt;embed&gt; element to bring Smart Input back up and specify a new source by copying and pasting the following into the text box:
					<PRE>
http://www.w3schools.com/html/helloworld.swf
					</PRE>
				</li>
				<li>Click OK.</li>
				<li>Click on the Preview icon in the toolbar. This should open a new browser window showing your &lt;embed&gt; element. Assuming you have Flash
					installed for your browser, you will see a small Flash animation that says "Hello, World."</li>
			</ol>
		</li>
		<li>Click on the "X" close button to close the html file (without saving).</li>
	</ol>
	<h3 class="expectedResults_subsection">Expected results</h3>
	<ol class="expectedResults">
		<li>See above.</li>
	</ol>

	<h2 class="test_section">&lt;select&gt;</h2>
	<h3 class="steps_subsection">Steps</h3>
	<ol class="steps">
		<li>Create new HTML file.</li>
		<li>Drag a &lt;select&gt; onto the canvas.</li>
		<li>Smart Input should be displayed with 3 items. Click OK, and a drop down button should appear on the canvas.</li>
		<li>Go to widget specific properties and check the <i>multiple</i> attribute. The drop down should become a select list.</li>
		<li>Still within widget specific properties, enter 15 into the <i>size</i> field. This will cause the select field to increase in vertical size
			to accommodate 15 rows of data without scrolling.</li>
		<li>Double-click the select list to bring up Smart Input. Copy and paste the text below into the text box and click OK.
			<PRE>
Group 1
>Item 1
>+Item 2
Group 2
>Item 3
>Item 4
Group 3
>Item 5
>Item 6	
Item 7
Item 8
Item 9
Item 10		
			</PRE>
		</li>
		<li>As shown in the screen shot below, there should be three option groups (each containing 2 items), the last 4 items should be top-level items
			(not option groups), and Item 2 should be selected.</li>
			<img src="images/multiSelectHTML.png">
		<li>Click on the "X" close button to close the html file (without saving).</li>
	</ol>
	<h3 class="expectedResults_subsection">Expected results</h3>
	<ol class="expectedResults">
		<li>See above.</li>
	</ol>

	<h2 class="test_section">&lt;fieldset&gt; and &lt;input&gt;</h2>
	<h3 class="steps_subsection">Steps</h3>
	<ol class="steps">
		<li>Choose New HTML File from the New menu</li>
		<li>Open the HTML folder in the Widget palette.</li>
		<li>Drag a &lt;fieldset&gt; widget onto the canvas.</li>
		<li>Notice a Smart Input dialog to enter legend text is displayed. Change the value from "Legend" to one of your choosing (say "My Fieldset Legend")
		    and click OK.</li>
		<li>Resize the &lt;fieldset&gt; so it has a width of roughly 400px and a height of roughly 200px.</li>
		<li>Drag an &lt;input&gt; onto the canvas inside of the &lt;fieldset&gt;. You should see a text field rendered inside of the &lt;fieldset&gt;.</li>
		<li>Under widget-specific properties, put a check next to <i>disabled</i> and change the <i>value</i> field to something like "my disabled input". You should see your 
		    text in a disabled text field.</li>
		<li>Drag another &lt;input&gt; onto the canvas inside of the &lt;fieldset&gt;. You should see another text field next to the first one. </li>
		<li>With the 2nd &lt;input&gt; selected, choose "file" from the <i>type</i> pull-down list under widget specific properties. The &lt;input&gt; that was a text field should turn into a
			file chooser.</li>
		<li>Click on Preview icon in the toolbar. This should open a new browser window showing your fieldset (with your caption) containing two inputs. The first
			input should be a disabled text field. The second input should be a file chooser (click the "Choose File"" button to confirm it brings up a file dialog). </li>
		<img src="images/fieldsetHTML.png">
		<li>Click on the "X" close button to close the html file (without saving).</li>
	</ol>
	<h3 class="expectedResults_subsection">Expected results</h3>
	<ol class="expectedResults">
		<li>See above.</li>
	</ol>
</body>
</html>